<template>
  <div class="box">
    <h1>当前登录用户：</h1>
    <p class="fc">用户头像：<img :src="userInfo.avatar" /></p>
    <p>用户姓名：{{ userInfo.name }}</p>
    <p>手机号：{{ userInfo.mobile }}</p>
    <p>用户住址：{{ userInfo.address }}</p>
    <p>用户邮箱：{{ userInfo.email }}</p>

    <div class="about-us fbc" @click="outLogin">
      <span>退出登录</span>
      <van-icon name="arrow" />
    </div>
    <div class="about-us fbc" @click="toPath('/about')">
      <span>关于我们</span>
      <van-icon name="arrow" />
    </div>
    <div class="about-us fbc" @click="toPath('/test')">
      <span>测试页面</span>
      <van-icon name="arrow" />
    </div>
  </div>
  <footer-tabbar />
</template>

<script>
import { Toast, Dialog } from "vant";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import FooterTabbar from "components/FooterTabbar";
export default {
  name: "Center",
  components: {
    FooterTabbar,
  },
  setup() {
    const router = useRouter();
    const store = useStore();
    const userInfo = store.getters.userData;
    function toPath(path) {
      router.push(path);
    }
    // 退出登录
    function outLogin() {
      Dialog.confirm({
        title: "提示",
        message: "您确定退出登录吗？",
      })
        .then(() => {
          store.commit("user/LOGOUT");
          Toast("退出登录成功");
          router.replace("/login");
        })
        .catch(() => {
           Toast("取消退出登录");
        });
    }
    return { userInfo, outLogin, toPath };
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 0 35px;
  min-height: 100vh;
  background-color: #f0f2fc;
  h1 {
    font-size: 32px;
    padding-top: 100px;
    margin: 0;
  }
  p {
    font-size: 30px;
    padding: 10px 0;
    img {
      border-radius: 50%;
    }
  }
}
.about-us {
  margin-top: 20px;
  color: #333;
  font-size: 32px;
  padding: 20px 30px;
  font-size: 30px;
  border-radius: 12px;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
</style>
